<template>
  <div class="login-container">
    <login-header />
    <router-view />
    <login-footer />
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import LoginHeader from "@/components/LoginHeader";
import LoginFooter from "@/components/LoginFooter";

export default {
  name: "Login",
  components: {
    LoginHeader,
    LoginFooter
  },
  data() {
    return {};
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {},
  computed: {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/styles/variables.scss';
$bg: $light_gray;
.login-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  height: 100vh;
  width: 100%;
  background-color: $bg;
}
</style>
